.fdn-grid {
  height: 100%;


  .drag-item {
    // animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1; // 移入
    border: 1px dashed #ccc;
    background-color: aliceblue;

    div[class~='ghostClass'] {
      border: 2px dashed #4395ff !important;
    }

    div[class~='chosenClass'] {
      border: 2px dashed #4395ff !important;
    }

    div[class~='dragClass'] {
      border: 3px dashed #4395ff !important;
      transform: scale(1.1);
    }

    .drag-tool{
      position: absolute;
      top: -1px;
      right: -1px;
      background-color: #4395ff;

      span{
        width: 20px;
        height: 15px;
        &:hover{
          color: white
        }
      }
    }
  }

  div[class~='active'] {
    border: 2px dashed #4395ff;
    border-top: 3px solid #4395ff;
    border-right: 2px solid #4395ff;
    background-color: #cde3ff;
  }

  span[class~='ant-tag'] {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: 56px solid lightskyblue;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
 
}
@for $i from 1 through 24{
  $pcv : calc($i / 24) * 100%;
  div[class~='default-span-#{$i}']>span[class~='ant-tag'] {
    width: #{$pcv};
  }
}